<!-- 报名详情 -->
<template>
	<view class="container">
		<!-- 时间进度 -->
<!-- 		<u-steps :list="stepsList" :current="0" active-color="#2979ff" mode="number" direction="column">
		</u-steps> -->
		<view class="u-node-tip">
			<view class="u-order-desc">报名流程：</view>
		</view>
		<!-- 时间进度 -->
		<view class="wrap">
			<u-time-line-item nodeTop="2">
				<template v-slot:node>
					<span style="font-size: 14px; color:#00B069;">√</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc" style="color:#00B069;">填写联系人信息</view>		
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="2">
				<template v-slot:node>
					<span style="font-size: 14px; color:#00B069;">√</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc" style="color:#00B069;">邀请学员报名(选择报考等级，是否培训，上传资料)</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="0">
				<template v-slot:node>
					<span style="font-size: 14px;">③</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">确认报名人数，并提交审核(报名截止时自动提交)</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="0">
				<template v-slot:node>
					<span style="font-size: 14px;">④</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">确认费用并支付(优惠政策请联系客服)</view>
					</view>
				</template>
			</u-time-line-item>
		</view>	
		

		<!-- 报名信息内容 -->
		<view class="card-name">
			<view class="card-image">
				<u-image width="60px" height="80px" src="/static/nav/nav-classify.png"></u-image>
			</view>
			<view class="card-content">
				<view class="title">名称</view>
				<view class="info-item">
					<text class="label">可选等级：</text>
					<text class="value">三级、四级、五级</text>
				</view>
				<view class="info-item">
					<text class="label">报名截止时间：</text>
					<text class="value">6月20日 00:00</text>
				</view>
			</view>

		</view>

		<!-- 报名学员 -->
		<view class="card">
			<view class="header">
				<text>报名学员</text>
				<text class="count">已填报 12 名学员</text>
			</view>

			<!-- 学员表格 -->
			<view class="table">
				<view class="table-header">
					<view class="th">学员/手机号</view>
					<view class="th">考证费用</view>
					<view class="th">是否培训</view>
					<view class="th">金额(元)</view>
				</view>
				<u-read-more ref="uReadMore"  :show-height="400" :toggle="true" close-text="展开">
					<view class="table-row" v-for="(item, index) in studentList" :key="index">
						<view class="td">{{ item.name }} {{ item.phone }}</view>
						<view class="td">{{ item.level }} {{ item.examFee }}</view>
						<view class="td">{{ item.training ? '是' : '否' }}</view>
						<view class="td">{{ item.amount }}</view>
					</view>
				</u-read-more>
			</view>
			
		</view>

		<!-- 订单金额 -->
		<view class="card">
			<view class="amount-item">
				<text>订单金额</text>
				<text>¥1230.00</text>
			</view>
			<view class="amount-item">
				<text>优惠折扣</text>
				<text>-¥0.00</text>
			</view>
			<view class="total-amount">
				<text>实付金额：</text>
				<text class="red">未支付</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="card">
			<view class="section-title">订单信息</view>
			<view class="info-item">
				<text class="label">联系人</text>
				<text class="value">XXX 156666666</text>
			</view>
			<view class="info-item">
				<text class="label">订单号</text>
				<text class="value">ggdfg54544554545454 <text class="copy" @click="copyOrderNo">复制</text></text>
			</view>
			<view class="info-item">
				<text class="label">下单时间</text>
				<text class="value">2024/12/12 00:00:00</text>
			</view>
			<view class="info-item">
				<text class="label">支付方式</text>
				<text class="value">微信支付（含其它方式） <text class="view" @click="viewPayment">查看</text></text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<u-button type="primary" @click="subLookResult" shape="circle" size="mini">查看成绩</u-button>
			<u-button type="primary" @click="submitPayment" shape="circle" size="mini">复制报名链接</u-button>
			<u-button type="primary" @click="submitPayment" shape="circle" size="mini">取消报名</u-button>
			<u-button type="primary" @click="submitPayment" shape="circle" size="mini">提交审核</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentList: [{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						examFee: '80.00',
						training: true,
						amount: '240.00'
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '二级',
						examFee: '90.00',
						training: false,
						amount: '90.00'
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						examFee: '80.00',
						training: true,
						amount: '240.00'
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						examFee: '80.00',
						training: true,
						amount: '240.00'
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						examFee: '80.00',
						training: true,
						amount: '240.00'
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						examFee: '80.00',
						training: true,
						amount: '240.00'
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						examFee: '80.00',
						training: true,
						amount: '240.00'
					}
				],
				// 步骤条
				stepsList: [{
						name: "填写联系人信息"
					},
					{
						name: "邀请学员报名（选择考评等级，是否培训，上传资料）"
					},
					{
						name: "确认报名人数，并提交审核"
					},
					{
						name: "确认费用并支付（优惠政策请联系客服）"
					},
				],
			}
		},
		methods: {
			copyOrderNo() {
				uni.setClipboardData({
					data: 'ggdfg54544554545454',
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			viewPayment() {
				uni.showToast({
					title: '查看支付方式',
					icon: 'none'
				});
			},
			// 查看成绩
			subLookResult(){
				uni.navigateTo({
					url: '/pages/Institution/record/lookresult'
				});
			},
			// 提交支付
			submitPayment() {
				// uni.showToast({
				// 	title: '提交支付',
				// 	icon: 'none'
				// });
				// 这里可以添加支付逻辑
				uni.navigateTo({
					url: '/pages/Institution/record/paying'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		padding-bottom: 120rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}
	
	// 时间进度条
	.u-node-tip {
		margin: 10px 10px 0px 10px;
		padding: 0px;
		font-size: 18px;
	}
	
	.wrap {
		margin-left: 40px;
		padding: 24rpx 24rpx 24rpx 0;
	}
	
	/deep/ .u-time-axis-item {
		margin-bottom: 0px;
	}
	
	.u-order-desc {
		// color: rgb(150, 150, 150);
		color: #333333;
		font-size: 28rpx;
		// margin-bottom: 6rpx;
		// line-height: 23px;		
	}
	
	
	.card-name {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		display: flex;	
			
			.card-image{
				margin-right: 10px;
			}
	}
	

	.card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	

	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 16rpx;
		font-size: 26rpx;

		.label {
			color: #666;
			width: 180rpx;
		}

		.value {
			flex: 1;
			color: #333;
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.count {
			color: #666;
			font-size: 24rpx;
		}
	}

	.table {
		margin-bottom: 20rpx;

		.table-header,
		.table-row {
			display: flex;
			padding: 16rpx 0;
			border-bottom: 1rpx solid #eee;
		}

		.th {
			flex: 1;
			font-weight: bold;
			font-size: 24rpx;
			color: #666;
			text-align: center;
		}

		.td {
			flex: 1;
			font-size: 24rpx;
			color: #333;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.view-all {
		text-align: center;
		color: #2979ff;
		font-size: 24rpx;
		padding: 10rpx 0;
	}

	.amount-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #666;
	}

	.total-amount {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: bold;

		.red {
			color: #ff0000;
			margin-left: 10rpx;
		}
	}

	.copy,
	.view {
		color: #2979ff;
		margin-left: 20rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between; /* 按钮之间的间距平均分布 */
	}
</style>